import React, { PureComponent } from "react";

import { View, Alert, TouchableOpacity, Image, Text, FlatList, ImageBackground } from "react-native";

import TopBar from "../../../../../components/topbar";

import selectImage from "../../../../../assets/images/004_select.png"

import buttonImage from "../../../../../assets/images/004_button.png"

import { width } from "../../../../../util/AdapterUtil"

import styles from "./style"

export default class NewbieTaskScreen extends PureComponent {
    constructor() {
        super();
        this.state = {
            data: [{ id: "1", details: "绑定手机号", money: '+0.5', isSelect: true },
            { id: "2", details: "完成一个精选任务", money: '+0.5', isSelect: false },
            { id: "3", details: "完成1次签到", money: '+0.5', isSelect: false },
            { id: "4", details: "收1位徒弟", money: '+0.5', isSelect: false },
            { id: "5", details: "完成1个深度任务", money: '+0.5', isSelect: false }]
        }
    }
    componentDidMount() {

    }

    _keyExtractor = (item, index) => item.id

    isSelectAll() {
        for (let i = 0; i < 4; i++) {
            if (!this.state.data[i].isSelect) {
                return false
            }
        }
        return true
    }

    render() {
        return (
            <View style={{ flex: 1, backgroundColor: "#EA6E32" }}>
                <TopBar navigation={this.props.navigation} title="新手任务"
                    leftIsVisible={true} ></TopBar>
                <View style={{ paddingTop: 20, paddingBottom: 20, backgroundColor: "#fff", borderRadius: 13, marginTop: 14, marginLeft: 17, marginRight: 17 }}>
                    <View style={{ alignItems: "center" }}>
                        <Text style={{ fontSize: 20, fontWeight: "bold" }}>任务内容</Text>
                    </View>
                    <View style={{ alignItems: "center", marginTop: 20 }}>
                        <View style={{ width: 100, height: 1, backgroundColor: "#FFCE65" }}></View>
                    </View>
                    <FlatList
                        style={{ marginTop: 20 }}
                        scrollEnabled={false}
                        data={this.state.data}
                        keyExtractor={this._keyExtractor}
                        renderItem={({ item }) =>
                            <View style={{ height: 50, justifyContent: "center" }} >
                                <View style={{ flexDirection: "row", marginLeft: 16, marginRight: 10 }}>
                                    <View style={{ flex: 1, flexDirection: "row" }}>
                                        <Text style={[item.isSelect ? styles.numStyle : styles.numSelectStyle, { alignSelf: "center" }]}>{item.id}</Text>
                                        <Text style={[item.isSelect ? styles.detailsStyle : styles.detailsSelectStyle, { alignSelf: "center", marginLeft: 10 }]}>{item.details}</Text>
                                    </View>
                                    <View style={{ flexDirection: "row", justifyContent: "flex-end" }}>
                                        <Text style={[item.isSelect ? styles.moneyStyle : styles.moneySelectStyle, { alignSelf: "center", marginRight: 5 }]}>{item.money}</Text>
                                        <Text style={[item.isSelect ? styles.yuanStyle : styles.yuanSelectStyle, { alignSelf: "center", marginRight: 5 }]}>元</Text>
                                        <Image style={styles.imageStyle} source={item.isSelect ? selectImage : null} />
                                    </View>
                                </View>
                            </View>
                        } />
                    <View style={{ height: 60, marginTop: 40 }}>
                        <TouchableOpacity onPress={this.submitGetMoney.bind(this)}
                            style={{ marginLeft: 54, marginRight: 54, flex: 1, justifyContent: "center", height: 47 }}>
                            <ImageBackground source={this.isSelectAll() ? buttonImage : null}
                                style={{
                                    width: width - 34 - 108, height: 47, alignItems: "center",
                                    justifyContent: "center", backgroundColor: "#C9C9C9", borderRadius: 5
                                }}>
                                <Text style={{ fontSize: 17, color: '#fff' }}>全部完成，领取2.0元</Text>
                            </ImageBackground>
                        </TouchableOpacity>
                    </View>
                </View>
            </View>
        )
    }

    submitGetMoney() {

    }
}
